<template>
	<view>
		<u-navbar :is-back="false" title=" " :border-bottom="false"></u-navbar>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30">
			<view class="u-flex" @click="profile">
				<view class="u-m-r-20">
					<u-avatar :src="avatar" size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-20">{{ vuex_user.user.userName }}</view>
					<view class="u-font-14 u-tips-color">昵称:{{ vuex_user.user.nickName }}</view>
					<view class="tag">Lv3</view>
				</view>
			</view>
		</view>
		<view class="center-nav">
			<!-- <u-row>
				<u-col span="3" text-align="center" v-for="(item,index) in navList" :key="index">
					<view v-if="item.name=='问题反馈'"> -->
			<!-- 调用微信反馈功能 -->
			<!-- <button type="default" open-type="feedback"  class="clearBtn" hover-class="none" style="background-color: #FFFFFF;">
							<u-icon :name="item.icon" color="#909399" size="50"></u-icon>
							<view class="tabName" style="padding-top: 15rpx;">{{item.name}}</view>
						</button>
					</view>
					<view @click="clickNav(item.url)" v-else>
						<u-icon :name="item.icon" color="#909399" size="50"></u-icon>
						<view class="tabName">{{item.name}}</view>
					</view>
				</u-col>
			</u-row> -->
			<view class="title">
				我的订单
			</view>
			<u-row>
				<u-col span="4">
					<view class="cir bg-green" @click="Keeper">
						<image :src="'/static/img/myspace/keeper.svg'" class="icon"></image>
					</view>
					<view class="tabName">家政护理</view>
				</u-col>
				<u-col span="4">
					<view class="cir bg-purple">
						<image :src="'/static/img/myspace/people.svg'" class="icon"></image>
					</view>
					<view class="tabName">康复理疗</view>
				</u-col>
				<u-col span="4">
					<view class="cir bg-red">
						<image :src="'/static/img/myspace/doc.svg'" class="icon"></image>
					</view>
					<view class="tabName">上门体检</view>
				</u-col>
			</u-row>
		</view>

		<!-- <view class="u-m-t-20">
			<u-cell-group> -->
		<!-- <u-cell-item icon="integral" title="实名认证" @click="setting"></u-cell-item> -->
		<!-- <u-cell-item icon="setting" title="个人中心" @click="setting"></u-cell-item>
			</u-cell-group>
		</view> -->

		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="level" :arrow="false" title="技术支持" value="18720989281"  @click="callPhoneNumber"></u-cell-item>
				<u-cell-item icon="question-circle" title="常见问题" @click="problem"></u-cell-item>
				<u-cell-item icon="star" title="关于我们" @click="aboutMe"></u-cell-item>
			</u-cell-group>
		</view> -->
	</view>
</template>

<script>
import config from "@/common/config.js" // 全局配置文件
export default {
	data() {
		return {
			avatar: uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl) ? uni.getStorageSync('lifeData').vuex_user.user.avatar : config.staticUrl + uni.getStorageSync('lifeData').vuex_user.user.avatar,
			show: true,
			navList: [
				{ name: "家政护理", icon: "checkmark-circle", url: "pages/center/order" },
				{ name: "康复理疗", icon: "heart", url: "pages/center/heart" },
				{ name: "上门体验", icon: "order", url: "pages/center/history" },
			],
		}
	},
	onLoad() {
		uni.$on('updateAvatar', (obj) => {
			// 获取数据
			this.updateAvatar();
		})
	},
	onUnload() {
		// 移除监听事件  
		uni.$off('updateAvatar');
	},
	onShow() {
		// 检查token
		this.checkToken();
	},
	methods: {
		logout() {
			// 登录成功修改token与用户信息
			this.$u.vuex('vuex_token', '');
			this.$u.vuex('vuex_user', {});
			this.$u.route('/pages/login/login')
		},
		profile() {
			this.$u.route('/pages/profile/profile')
		},
		setting() {
			this.$u.route('/pages/profile/setting')
		},
		//拨打固定电话
		callPhoneNumber() {
			uni.makePhoneCall({
				phoneNumber: "18720989281",
			});
		},
		Keeper(){
			this.$u.route({
				url: 'pages/center/order'
			})
		},
		problem() {
			this.$u.route({
				url: 'pages/login/problem'
			})
		},
		// 关于作者
		aboutMe() {
			this.$u.route('/pages/profile/aboutMe')
		},
		checkToken() {
			// 判断是否有token
			let lifeData = uni.getStorageSync('lifeData');
			let token = lifeData.vuex_token
			if (!token) {
				// 没有token 则跳转到登录
				return uni.reLaunch({
					url: '../login/login'
				})
			} else {
				// 判断Token是否有效
				let url = "/api/profile/isExpiration";
				this.$u.get(url, {
					token: token
				}).then(obj => {
					if (obj.data) {
						// 没有token过期则跳转到登录
						return uni.reLaunch({
							url: '../login/login'
						})
					}
				});
			}
		},
		code() {
			this.$mytip.toast('敬请期待')
		},
		clickNav(url) {
			if (url) {
				this.$u.route(url);
			} else {
				this.$mytip.toast('敬请期待')
			}
		},
		updateAvatar() {
			this.avatar = uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl) ? uni.getStorageSync('lifeData').vuex_user.user.avatar : config.staticUrl + uni.getStorageSync('lifeData').vuex_user.user.avatar
		},
	}
}
</script>

<style lang="scss">
.user-box {
	// background-color: #fff;
	justify-content: space-between;
	.tag{
		color: white;
		text-align: center;
		background-color: #fddb78;
		width: 100rpx;
		height: 40rpx;
		border-radius: 20rpx;
	}
}

.center-nav {
	background-color: #FFFFFF;
	margin-top: 30rpx;
	padding: 50rpx 0;
	border-radius: 8px;
	margin: auto;
	width: 700rpx;
	.title{
		font-size: 40rpx;
		padding-bottom: 30rpx;
		padding-left: 40rpx;
	}
	.tabName {
		color: #606266;
		font-size: 32rpx;
		padding-top: 10rpx;
		margin: auto;
		text-align: center;
	}
	.icon {
		width: 50rpx;
		height: 50rpx;
		margin: auto;
	}
	.cir{
		margin: auto;
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
		padding-top: 20rpx;
	}
	.bg-green{
		background-color: #e6f6f4;
	}
	.bg-purple{
		background-color: #ebedfc;
	}
	.bg-red{
		background-color: #f9edee;
	}
}

.qiandao {
	color: #606266;
	font-size: 24rpx;
	margin-right: 24rpx;
	margin-top: 54rpx;
	justify-content: center;
	align-items: center;
}

.clearBtn {
	margin: 0;
	padding: 0;
	line-height: 1;
	background-color: #FFFFFF;
}

.clearBtn::after {
	position: unset !important;
	border: unset;
}
</style>